<template>
  <div class="mod-demo-ueditor">

      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="110px">
        <el-form-item label="话题标题" prop="title">
          <el-input v-model="dataForm.title" placeholder="话题标题"></el-input>
        </el-form-item>

      <el-form-item label="话题内容" prop="threadsText">
        <template>
          <script :id="ueId" v-model="dataForm.threadsText" class="ueditor-box"  type="text/plain"></script>
        </template>
      </el-form-item>

      <el-form-item label="发布用户" prop="userId">

        <el-select v-model="dataForm.userId" placeholder="请选择">
          <el-option
            v-for="item in memberList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发布路径" prop="categoryId">
        <el-tag type="info">
          {{optionsData[0].name}} > {{optionsData[1].name}} > {{optionsData[2].name}}
        </el-tag>

      </el-form-item>

      <el-form-item label="支持转载" prop="copyright">
        <el-switch v-model="dataForm.copyright" active-value="1" inactive-value="0"
                   active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="dataForm.status" active-value="1" inactive-value="0"
                   active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </el-form-item>

        <el-form-item label="公告">

          <el-radio-group v-model="dataForm.notice" size="medium">
            <el-radio border label="1" value="1" >公告</el-radio>
            <el-radio border label="0" value="0">非公告</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$router.push({name: 'community-communitytopic'})">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
  </div>
</template>

<script>
  import ueditor from 'ueditor'
  export default {

    data () {
      return {
        ue: null,
        ueId: `J_ueditorBox_${new Date().getTime()}`,
        ueContent: '',
        visible: false,
        addOrUpdateVisible:true,
        optionsData:[],
        memberQueryObj: {
          pageParams: {
            page: 1,  //当前页
            limit:10,//每页记录数
            sidx: "sort",
            order: "",
          },
          and: {//放在and里面的都是 并且条件
            must:{official:'1',status:'1'}, //精确匹配
          }
        },
        memberList:[],
        dataForm: {
          id: 0,
          title:'',
          threadsText: '',
          userId: '',
          communityCategoryId: '',
          communityId: '',
          topicCategoryId: '',
          copyright: '0',
          status: '1',
          notice:'',
          pass: '1',
        },
        status:{

        },
        dataRule: {
          // threadsText: [
          //   { required: true, message: '话题内容', trigger: 'blur' }
          // ],
          userId: [
            { required: true, message: '发布人ID不能为空', trigger: 'blur' }
          ],
          // categoryId: [
          //   { required: true, message: '话题分类ID不能为空', trigger: 'blur' }
          // ],
          praiseCount: [
            { required: true, message: '点赞数不能为空', trigger: 'blur' }
          ],
          replyCount: [
            { required: true, message: '评论数不能为空', trigger: 'blur' }
          ],
          viewCount: [
            { required: true, message: '游览次数不能为空', trigger: 'blur' }
          ],
          copyright: [
            { required: true, message: '版权信息,表明此话题是否可以转载 0 不可以 1 可以不能为空', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '是否开启 0 否 1 是不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    mounted () {
      var id = this.$route.params.id
      this.optionsData = (this.$route.params.optionsData)
      this.getOfficialMemberList()
      this.init(id)
    },
    methods: {
      init (id) {

        this.dataForm.id = id || 0

        this.$nextTick(() => {

          this.$refs['dataForm'].resetFields()

          this.ue = ueditor.getEditor(this.ueId, {
            // serverUrl: '', // 服务器统一请求接口路径
            zIndex: 5000
          })

          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/forum/communitytopic/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                console.log(data)
                this.dataForm.title = data.communityTopic.title
                this.dataForm.threadsText = data.communityTopic.threadsText
                this.dataForm.userId = data.communityTopic.userId
                this.dataForm.communityCategoryId = data.communityTopic.communityCategoryId
                this.dataForm.communityId = data.communityTopic.communityId
                this.dataForm.topicCategoryId = data.communityTopic.topicCategoryId
                this.dataForm.copyright = data.communityTopic.copyright
                this.dataForm.status = data.communityTopic.status
                this.dataForm.pass = data.communityTopic.pass
                this.dataForm.notice = data.communityTopic.notice
              }
            })
          }else{
            this.dataForm.communityCategoryId = this.optionsData[0].id
            this.dataForm.communityId = this.optionsData[1].id
            this.dataForm.topicCategoryId = this.optionsData[2].id
          }
          this.ue.ready(() => {
            this.ue.setContent(this.dataForm.threadsText)
          })

        })
      },
      // 表单提交
      dataFormSubmit () {

        this.ue.ready(() => {
          this.dataForm.threadsText = this.ue.getContent()
        })

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/forum/communitytopic/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'title': this.dataForm.title,
                'threadsText': this.dataForm.threadsText,
                'userId': this.dataForm.userId,
                'copyright': this.dataForm.copyright,
                'communityCategoryId':this.dataForm.communityCategoryId,
                'communityId':this.dataForm.communityId,
                'topicCategoryId':this.dataForm.topicCategoryId,
                'notice': this.dataForm.notice,
                'status':this.dataForm.status,
                'pass': '1',
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
            this.$router.push({name: 'community-communitytopic'})
          }
        })
      },
      getOfficialMemberList(){
        this.$http({
          url: this.$http.adornUrl('/forum/member/multiConditList'),
          method: 'post',
          data: this.$http.adornParams(this.memberQueryObj)
        }).then(({data}) => {
          console.log(data)
          this.memberList = data.page.list
        })
      }
    }
  }
</script>
<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 500;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
</style>
